import { getHospitalValue } from '@/api/hospitalList/HospitalList';
import { ReqHospitallistList, ReqHospitallistiteam } from '@/api/hospitalList/model/HospitalListType';
import { Button, Card, Form, Input, Select, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
let {Option} = Select
export default function HospitalList() {
  let [current,setcurrent] = useState<number>(1)
  let [pageSize,setpageSize] = useState<number>(5)
  let [total,settotal] = useState<number>(50)
  let [hospital,sethospital] = useState<ReqHospitallistList>([])
    // 初始化数据渲染页面
  let getHospital = async(page=current,limit=pageSize)=>{
    let res = await getHospitalValue({page,limit})
    sethospital(res.content)
    settotal(res.totalElements)
  }
  // 模拟生命周期
  useEffect(()=>{
    getHospital()
  },[current,pageSize])

  const columns:ColumnsType<any> = [
    {
      align:"center",
      title: '序号',
      render(key: string, text: string, index: number) {
        return index + 1
      }
    },
    {
      
      align:"center",
      title: '医院logo',
      dataIndex: 'logoData',
      render(tex){
        return <img style={{width:100}} src={`data:image/jpeg;base64,${tex}`} alt="" />
      }
    

    },
    {
      align:"center",
      title: '医院名称',
      dataIndex: 'hosname',
 
    },
    {
      align:"center",
      title: '等级',
      render(rew:ReqHospitallistiteam){
        return rew.param.hostypeString

      }
   
 
    },
    {
      align:"center",
      title: '详细地址',
      render(row:ReqHospitallistiteam){
        return row.param.fullAddress

      }
  
 
    },
    {
      align:"center",
      title: '状态',
      dataIndex: 'status',
 
    },
    {
      align:"center",
      title: '创建时间',
      dataIndex: 'createTime',
 
    },
    {
      align:"center",
      title: '操作',
    render(){
      return <span>
        <Button htmlType="submit" type="primary">查看</Button>
        <Button htmlType="submit" type="primary" className='ml'>排版</Button>
        <Button htmlType="submit" type="primary" className='ml'>上线</Button>
      </span>
    }
 
    },
  ];
  return (
    <Card>
       {/* form表单 */}
       <Form
        layout="inline"
      >
        <Form.Item
          name="provinceCode"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择省份">
          
          </Select>
        </Form.Item>
        <Form.Item
          name="cityCode"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择市">
            
          </Select>
        </Form.Item>
        <Form.Item
          name="districtCode"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择区">
           
          </Select>
        </Form.Item>

        <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item
          name="hoscode"

        >
          <Input placeholder='医院编码' />
        </Form.Item>
        <Form.Item
          name="hostype"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择医院类型">
            <Option>11111111</Option>
          </Select>
        </Form.Item>
        <Form.Item
          className='mt'
          name="status"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择医院状态">
            <Option>11111111</Option>
          </Select>
        </Form.Item>
        <Form.Item className='mt'>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button className='ml' type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      {/* 表格 */}
      <Table 
      bordered
      className='mt'
      rowKey="id"
      pagination={{
        current: current,
        total: total,
        pageSizeOptions: [5, 10, 15, 20],
        showQuickJumper: true,
        pageSize: pageSize,
        showSizeChanger: true,
        showTotal(total: number) {
          return <span>{total}</span>
        },
        onChange(page: number, pageSize: number){
          setcurrent(page)
          setpageSize(pageSize)
          

        }
     
      }
      }

      columns={columns} dataSource={hospital} />;
    </Card>
  )
}
